<template>
  <view class="content">
    <van-nav-bar title="会员特权" left-text="" :left-arrow="true" placeholder fixed @click-left="onClickLeft" />
    <view
      class="vip"
      :style="{
        height: 'calc(100vh - 230rpx - ' + (safeAreaTop + safeAreaBot) + 'px)',
      }"
    >
      <view class="vip-top">
        <view class="user-img">
          <image
            class="img-box"
            :src="`${info.member_head}` || 'https://images.tongzhuangkc.com/tz/default-user.png'"
          />
          <view class="img-icon" :class="info.vip_type === 1 ? 'vip' : info.vip_type === 2 ? 'active' : ''"></view>
        </view>
        <view class="user-name">{{ info.member_name }}</view>
        <view class="vip-tip"> 开通超级会员&nbsp;&nbsp;尊享九大权限</view>
      </view>
      <view class="vip-mark">
        <view class="vip-card">
          <image class="img-box" src="https://images.tongzhuangkc.com/tz/tab-car1.png" />
        </view>
        <view class="vip-package">
          <view
            class="package-list"
            @click="choseHandle(item)"
            :data-text="item.tip"
            v-for="item in list"
            :key="item.product_id"
            :class="chooseInfo.product_id === item.product_id ? 'active' : ''"
          >
            <view class="list-title">{{ item.product_name }}</view>
            <view class="price">￥{{ item.product_price }}</view>
            <view class="list-text" v-if="item.origin_product_price">原价￥{{ item.origin_product_price }}</view>
          </view>
        </view>
        <view class="vip-privilege">
          <view class="privilege-title">
            <image class="img-box" src="https://images.tongzhuangkc.com/tz/vip-t.png" />
          </view>
          <view class="privilege-box">
            <view class="privilege-list">
              <text>特权</text>
              <text class="vip-text">会员</text>
              <text class="super-text">超级会员</text>
            </view>
            <view class="privilege-list">
              <text>编辑发布货源</text>
              <text class="vip-text">8条/天</text>
              <text class="super-text">15条/天</text>
            </view>
            <view class="privilege-list">
              <text>货源刷新报关</text>
              <text class="vip-text">5条/天</text>
              <text class="super-text">10条/天</text>
            </view>
            <view class="privilege-list">
              <text>会员身份标识</text>
              <text class="list-tag"></text>
              <text class="list-tag-vip"></text>
            </view>
            <view class="privilege-list">
              <text>行业名录</text>
              <text class="answer"></text>
              <text class="answer"></text>
            </view>
            <view class="privilege-list">
              <text>首页推荐</text>
              <text class="wrong"></text>
              <text class="answer"></text>
            </view>
            <view class="privilege-list">
              <text>内页展播推荐 </text>
              <text class="wrong"></text>
              <text class="answer"></text>
            </view>
            <view class="privilege-list">
              <text>信息关联 </text>
              <text class="wrong"></text>
              <text class="answer"></text>
            </view>
            <view class="privilege-list">
              <text>精美店铺 </text>
              <text class="wrong"></text>
              <text class="answer"></text>
            </view>
            <view class="privilege-list">
              <text class="list-name" @click="goPage">代运营服务</text>
              <text class="wrong"></text>
              <text class="answer"></text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="vip-opt">
      <text>￥{{ chooseInfo.product_price }}</text>
      <view class="opt-btn" @click="payHandle">立即支付</view>
    </view>
  </view>
</template>

<script>
import { reactive, toRefs } from 'vue'
import TitlePage from '@/components/title/index'
import { getPriceInfo, orderAjax } from '@/http/buy'
import { getMemberInfo } from '@/http/user'
import { onShow } from '@dcloudio/uni-app'
export default {
  components: {
    TitlePage,
  },
  setup() {
    const state = reactive({
      HeadNavHeight: 0,
      safeAreaTop: 0,
      safeAreaBot: 0,
      info: {},
      list: [],
      chooseInfo: {},
    })
    const getHeadHeight = (data) => {
      state.HeadNavHeight = 2 * data
    }
    const onClickLeft = () => {
      uni.navigateBack({
        delta: 1,
      })
    }
    const goPage = () => {
      uni.navigateTo({
        url: `/subpackage-platform/operate/index`,
      })
    }
    const getPrice = async () => {
      const { data } = await getPriceInfo({
        product_type: 1,
      })
      state.list = data
      state.chooseInfo = data[0]
    }
    const getUserInfo = async () => {
      const { data } = await getMemberInfo()
      state.info = data
    }
    const choseHandle = (item) => {
      state.chooseInfo = item
    }
    const payHandle = async () => {
      const { product_id, product_price } = state.chooseInfo
      const { data } = await orderAjax({
        product_id,
        product_price,
      })
      if (data.need_wx_pay == 1) {
        uni.requestPayment({
          provider: 'wxpay',
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success: function (res) {
            uni.navigateTo({
              url: `/subpackage-platform/order/index`,
            })
          },
          fail: function (err) {
            console.log('fail:' + JSON.stringify(err))
          },
        })
      } else {
        uni.showToast({
          title: '恭喜您成为会员！',
          icon: 'none',
        })
        setTimeout(() => {
          uni.switchTab({
            url: `/pages/user/index`,
          })
        }, 1000)
      }
    }
    onShow(() => {
      getPrice()
      getUserInfo()
      uni.getSystemInfo({
        success: function (res) {
          state.safeAreaTop = res.safeAreaInsets.top === 20 ? 0 : res.safeAreaInsets.top
          state.safeAreaBot = res.safeAreaInsets.bottom !== 0 ? res.safeAreaInsets.bottom : '20'
        },
      })
    })
    return {
      ...toRefs(state),
      getHeadHeight,
      onClickLeft,
      goPage,
      choseHandle,
      payHandle,
    }
  },
}
</script>

<style lang="scss">
.content {
  height: 100vh;
  background: #19130e;
}
.vip {
  height: calc(100vh - 230rpx);
  overflow-y: auto;
}
.vip-top {
  text-align: center;
  padding: 64rpx 0 38rpx;
  background: url('https://images.tongzhuangkc.com/tz/vip-bg.png') no-repeat;
  background-size: 100% 100%;
  .user-img {
    margin: 0 auto;
    width: 120rpx;
    height: 120rpx;
    margin-bottom: 24rpx;
    position: relative;
    .img-box {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .img-icon {
      width: 40rpx;
      height: 40rpx;
      background: url('https://images.tongzhuangkc.com/tz/vip.png') no-repeat;
      background-size: 100% 100%;
      position: absolute;
      bottom: 0;
      right: 0;
      &.active {
        background: url('https://images.tongzhuangkc.com/tz/vip2.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  .user-name {
    padding: 0 32rpx;
    height: 64rpx;
    line-height: 64rpx;
    font-size: 48rpx;
    color: #fff;
    margin-bottom: 32rpx;
    @include text-ellipsis(1);
  }
  .vip-tip {
    height: 56rpx;
    line-height: 56rpx;
    font-size: 40rpx;
    background-image: -webkit-linear-gradient(bottom, #fcdcaa, #eebe72);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
.vip-mark {
  .vip-card {
    position: relative;
    z-index: 1;
    padding: 0 32rpx;
    width: 686rpx;
    height: 200rpx;
    .img-box {
      width: 100%;
      height: 100%;
    }
  }
  .vip-package {
    position: relative;
    z-index: 2;
    margin: -107rpx 0 32rpx;
    padding: 155rpx 19rpx 8rpx;
    background: url('https://images.tongzhuangkc.com/tz/vip-tehui.png') no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    flex-wrap: wrap;
    .package-list {
      width: 325rpx;
      text-align: center;
      padding: 32rpx 0;
      margin: 0 13rpx 24rpx;
      position: relative;
      background: #252932;
      border-radius: 16rpx;
      border: 4rpx solid #252932;
      .list-title {
        height: 40rpx;
        font-size: 28rpx;
        color: #f3c987;
        line-height: 40rpx;
      }
      .price {
        height: 80rpx;
        font-size: 64rpx;
        line-height: 80rpx;
        color: #f3c987;
        margin: 16rpx 0;
      }
      .list-text {
        height: 32rpx;
        font-size: 20rpx;
        line-height: 32rpx;
        color: #7f8798;
      }
      &.active {
        background: linear-gradient(143deg, #fde4c6 0%, #f8d2ab 100%);
        border-color: #cb9975;
        .list-title,
        .price {
          color: #5b4028;
        }
        .list-text {
          color: #a8896c;
        }
      }
      &::before {
        content: attr(data-text);
        padding: 0 10rpx;
        display: block;
        height: 36rpx;
        line-height: 36rpx;
        text-align: center;
        font-size: 20rpx;
        color: #fff;
        background: linear-gradient(125deg, #eebd9a 0%, #c79570 100%);
        position: absolute;
        top: -4rpx;
        right: -6rpx;
        border-radius: 0 16rpx 0 16rpx;
      }
    }
  }
}
.vip-privilege {
  padding: 32rpx;
  background: #252932;
  border-radius: 32rpx 32rpx 0 0;
  .privilege-title {
    text-align: center;
    margin-bottom: 34rpx;
    .img-box {
      width: 338rpx;
      height: 54rpx;
    }
  }
  .privilege-box {
    .privilege-list {
      display: flex;
      align-content: center;
      justify-content: space-between;
      height: 80rpx;
      &:nth-child(2n) {
        background: #303541;
      }
      text {
        font-size: 28rpx;
        color: #bcc1cc;
        width: 136rpx;
        padding-left: 16rpx;
        display: flex;
        align-items: center;
        &.list-name {
          background: url('https://images.tongzhuangkc.com/tz/wh.png') no-repeat center right 10rpx;
          background-size: 30rpx 30rpx;
        }
        &:nth-child(1) {
          width: 198rpx;
        }
        &.list-tag {
          padding: 0;
          background: url('https://images.tongzhuangkc.com/tz/vip.png') no-repeat center left 16rpx;
          background-size: 40rpx 40rpx;
        }
        &.list-tag-vip {
          background: url('https://images.tongzhuangkc.com/tz/vip2.png') no-repeat center left 16rpx;
          background-size: 40rpx 40rpx;
        }
        &.ordinary-text {
          color: #fff;
        }
        &.vip-text {
          color: #f3c987;
        }
        &.super-text {
          color: #ff8345;
        }
        &.wrong {
          background: url('https://images.tongzhuangkc.com/tz/icon-wrong.png') no-repeat center left 16rpx;
          background-size: 40rpx 40rpx;
        }
        &.answer {
          background: url('https://images.tongzhuangkc.com/tz/icon-answer.png') no-repeat center left 16rpx;
          background-size: 40rpx 40rpx;
        }
      }
    }
  }
}
.vip-opt {
  padding: 16rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  text {
    font-size: 36rpx;
    color: #f3c987;
  }
  .opt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 188rpx;
    height: 80rpx;
    font-size: 28rpx;
    color: #5b4028;
    background: linear-gradient(180deg, #fcdcaa 0%, #eebe72 100%);
    box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(243, 201, 135, 0.4);
    border-radius: 40rpx;
  }
}
</style>
